import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:yi_shop/model/message.dart';
import 'package:yi_shop/route/index.dart';
import 'package:yi_shop/ui/draw_under_line.dart';
import 'package:yi_shop/utils/colors.dart';
import 'package:yi_shop/utils/styles.dart';
import 'package:yi_shop/utils/svg.dart';

class HomeMessageController extends GetxController {
  RxList<MessageModel> pageList = RxList([]);

  late ScrollController scrollController;

  RxBool isLoading = false.obs;

  RxBool hasNext = true.obs;

  RxInt total = 45.obs;

  RxDouble opacity = 0.0.obs;

  double maxHeight = 183.0;

  @override
  void onInit() {
    final double deltaExtent = maxHeight - kToolbarHeight;
    initData();
    scrollController = ScrollController()
      ..addListener(() {
        final double t =
            clampDouble((scrollController.offset - kToolbarHeight) / deltaExtent, 0.0, 1.0);
        opacity.value = t;
        if (isLoading.isFalse &&
            scrollController.position.pixels >= scrollController.position.maxScrollExtent) {
          isLoading.value = true;
          loadMoreData();
        }
      });
    super.onInit();
  }

  void initData() {
    for (var i = 0; i < 15; i++) {
      pageList.add(MessageModel(title: '消息标题', introduce: '这里是消息正文这里是消息正文', date: '2019/12/15'));
    }
  }

  Future<void> loadMoreData() {
    return Future.delayed(const Duration(seconds: 3), () {
      if (total.value > pageList.length) {
        hasNext.value = true;
        isLoading.value = false;
        initData();
        return;
      }
      hasNext.value = false;
      isLoading.value = false;
    });
  }

  @override
  void onClose() {
    scrollController.dispose();
    super.onClose();
  }
}

class HomeMessageView extends GetView<HomeMessageController> {
  const HomeMessageView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: CustomScrollView(
        controller: controller.scrollController,
        slivers: [
          SliverAppBar(
            pinned: true,
            automaticallyImplyLeading: false,
            expandedHeight: controller.maxHeight,
            backgroundColor: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048),
            flexibleSpace: FlexibleSpaceBar(
              collapseMode: CollapseMode.parallax,
              background: Column(
                children: [
                  Padding(
                      padding: EdgeInsets.only(top: Get.mediaQuery.padding.top),
                      child: Container(
                        height: 49,
                        padding: const EdgeInsets.only(left: 20, top: 10),
                        child: Column(
                          children: [
                            Container(
                              alignment: Alignment.centerLeft,
                              child: Text(
                                '消息',
                                style: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize18, fontWeight: FontWeight.w700),
                              ),
                            ),
                            Container(
                              alignment: Alignment.centerLeft,
                              margin: const EdgeInsets.only(top: 5),
                              child: Text(
                                '${controller.total}条未读消息',
                                style:
                                    StylesUtils.customTextStyle(fontSize: StylesUtils.fontSize12),
                              ),
                            )
                          ],
                        ),
                      )),
                  Expanded(
                      child: Stack(
                    children: [
                      Positioned(
                        bottom: 0,
                        right: 0,
                        left: 0,
                        child: Container(
                          height: 30,
                          color: Colors.white,
                        ),
                      ),
                      Center(
                        child: Container(
                          width: 300,
                          height: 106,
                          decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(5.r),
                              boxShadow: [
                                BoxShadow(
                                    offset: const Offset(2, 2),
                                    blurRadius: 5,
                                    spreadRadius: 0,
                                    color: ColorsUtils.rgba(0, 0, 0, 0.349019607843137)),
                              ]),
                          child: Row(
                            children: [
                              Expanded(
                                  child: InkWell(
                                onTap: () {
                                  Get.toNamed(RoutePath.messageTrade);
                                },
                                child: Column(
                                  children: [
                                    Container(
                                      alignment: Alignment.center,
                                      margin: const EdgeInsets.only(top: 20),
                                      child: CircleAvatar(
                                        radius: 20,
                                        backgroundColor: ColorsUtils.parseColorFromHexString(
                                            ColorsUtils.color0099),
                                        child: Center(
                                          child:
                                              SvgUtils.assetName('u12116', width: 17, height: 14),
                                        ),
                                      ),
                                    ),
                                    Container(
                                      alignment: Alignment.center,
                                      margin: const EdgeInsets.only(top: 10),
                                      child: Text(
                                        '交易物流',
                                        style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.color3333),
                                      ),
                                    )
                                  ],
                                ),
                              )),
                              Expanded(
                                  child: InkWell(
                                onTap: () {
                                  Get.toNamed(RoutePath.messageNotice);
                                },
                                child: Column(
                                  children: [
                                    Container(
                                      alignment: Alignment.center,
                                      margin: const EdgeInsets.only(top: 20),
                                      child: CircleAvatar(
                                        radius: 20,
                                        backgroundColor: ColorsUtils.parseColorFromHexString(
                                            ColorsUtils.colorEc80),
                                        child: Center(
                                          child:
                                              SvgUtils.assetName('u12119', width: 19, height: 16),
                                        ),
                                      ),
                                    ),
                                    Container(
                                      alignment: Alignment.center,
                                      margin: const EdgeInsets.only(top: 10),
                                      child: Text(
                                        '通知消息',
                                        style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.color3333),
                                      ),
                                    )
                                  ],
                                ),
                              )),
                              Expanded(
                                  child: InkWell(
                                onTap: () {
                                  Get.toNamed(RoutePath.messageInteract);
                                },
                                child: Column(
                                  children: [
                                    Container(
                                      alignment: Alignment.center,
                                      margin: const EdgeInsets.only(top: 20),
                                      child: CircleAvatar(
                                        radius: 20,
                                        backgroundColor: ColorsUtils.parseColorFromHexString(
                                            ColorsUtils.colorC280),
                                        child: Center(
                                          child:
                                              SvgUtils.assetName('u12119', width: 19, height: 16),
                                        ),
                                      ),
                                    ),
                                    Container(
                                      alignment: Alignment.center,
                                      margin: const EdgeInsets.only(top: 10),
                                      child: Text(
                                        '互动消息',
                                        style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.color3333),
                                      ),
                                    )
                                  ],
                                ),
                              ))
                            ],
                          ),
                        ),
                      ),
                    ],
                  )),
                ],
              ),
              title: Obx(() => Text(
                    '消息（${controller.total}）',
                    style: StylesUtils.textStyle(
                        fontSize: StylesUtils.fontSize18,
                        color: ColorsUtils.rgba(255, 255, 255, controller.opacity.value)),
                  )),
              centerTitle: true,
            ),
          ),
          Obx(() => SliverList.list(
              children: controller.pageList
                  .map((row) => Container(
                        margin: const EdgeInsets.only(top: 15),
                        padding: const EdgeInsets.only(left: 15, top: 10),
                        child: DrawUnderLine(
                          color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
                          child: Container(
                            padding: const EdgeInsets.only(bottom: 15),
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Container(
                                  width: 50,
                                  height: 50,
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                    color:
                                        ColorsUtils.parseColorFromHexString(ColorsUtils.colorFbb8),
                                    borderRadius: BorderRadius.circular(5.r),
                                  ),
                                  child: SvgUtils.assetName('u962', width: 30, height: 22),
                                ),
                                Expanded(
                                    child: Container(
                                  padding: const EdgeInsets.only(left: 10, right: 20),
                                  child: Column(
                                    children: [
                                      Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                        children: [
                                          Text(
                                            row.title,
                                            style: StylesUtils.customTextStyle(
                                                fontSize: StylesUtils.fontSize16,
                                                fontWeight: FontWeight.w500,
                                                color: ColorsUtils.color3333),
                                          ),
                                          Text(
                                            row.date,
                                            style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color9999,
                                              fontSize: StylesUtils.fontSize13,
                                            ),
                                          )
                                        ],
                                      ),
                                      Container(
                                        margin: const EdgeInsets.only(top: 10),
                                        alignment: Alignment.centerLeft,
                                        child: Text(
                                          row.introduce,
                                          maxLines: 1,
                                          overflow: TextOverflow.ellipsis,
                                          style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color6666,
                                              fontSize: StylesUtils.fontSize13),
                                        ),
                                      )
                                    ],
                                  ),
                                ))
                              ],
                            ),
                          ),
                        ),
                      ))
                  .toList())),
          Obx(() {
            if (controller.hasNext.isFalse) {
              return noBottom();
            }
            return renderBottom();
          })
        ],
      ),
    );
  }

  SliverToBoxAdapter noBottom() {
    return SliverToBoxAdapter(
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 15),
        alignment: Alignment.center,
        child: const Text(
          '已经到底',
          style: TextStyle(
            fontSize: 15,
            color: Color(0xFF333333),
          ),
        ),
      ),
    );
  }

  SliverToBoxAdapter renderBottom() {
    if (controller.isLoading.isTrue) {
      return SliverToBoxAdapter(
          child: Container(
        padding: const EdgeInsets.symmetric(vertical: 15),
        child: const Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '努力加载中...',
              style: TextStyle(
                fontSize: 15,
                color: Color(0xFF333333),
              ),
            ),
            Padding(padding: EdgeInsets.only(left: 10)),
            SizedBox(
              width: 20,
              height: 20,
              child: CircularProgressIndicator(strokeWidth: 3),
            ),
          ],
        ),
      ));
    }
    return SliverToBoxAdapter(
        child: Container(
      padding: const EdgeInsets.symmetric(vertical: 15),
      alignment: Alignment.center,
      child: const Text(
        '上拉加载更多',
        style: TextStyle(
          fontSize: 15,
          color: Color(0xFF333333),
        ),
      ),
    ));
  }
}
